<template>
    <div>
        <el-dialog :title="title" :close-on-click-modal="false" v-dialogDrag :visible.sync="editVisible">
            <el-form v-loading="loading" label-width="105px" ref="editForm" :model="editForm">

                <el-form-item label="预警名称:" prop="warnName">
                    <el-input v-model="editForm.warnName" :disabled="true"></el-input>
                </el-form-item>
                <el-form-item label="预警类型:" prop="warnTypeStr">
                    <el-input v-model="editForm.warnTypeStr" :disabled="true"></el-input>
                </el-form-item>

                <el-form-item label="指定处理人:" prop="selectUserIds">
                    <section style="min-width:145px" >
                        <!-- <el-select clearable size="small" v-model="editform.userIds" :multiple="true" placeholder="请选择处理人">
                            <el-option v-for="item in  userList" :key="item.id" :label="item.name" :value="item.id">
                            </el-option>
                        </el-select> -->
                        <el-select clearable v-model="editForm.selectUserIds" multiple filterable remote reserve-keyword placeholder="请输入处理人"
                            :remote-method="queryUserList" :loading="loading">
                            <el-option v-for="item in userList" :key="item.id" :label="item.name" :value="item.id">
                            </el-option>
                        </el-select>
                    </section>
                </el-form-item>
                <el-form-item label="指定处理角色:" prop="selectRoleIds">
                    <section style="min-width:145px">
                        <el-select clearable v-model="editForm.selectRoleIds" multiple filterable remote reserve-keyword placeholder="请输入处理角色"
                            :remote-method="queryRoleList" :loading="loading">
                            <el-option v-for="item in roleList" :key="item.id" :label="item.name" :value="item.id">
                            </el-option>
                        </el-select>
                    </section>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <div class="footer-input">
                    <el-button size="small" type="primary" @click="doSubmit()" v-noMoreClick>确定</el-button>
                    <el-button size="small" @click="close()">取消</el-button>

                </div>

            </span>
        </el-dialog>
    </div>
</template>
<script>
    import {
        save,
        getById,getUserSearchlist,getRoleSearchlist
    } from '@/api/warn/WarnUser.js';
    export default {
        components: {},
        data() {
            return {
                loading: false,
                areaLabel: {},
                method: '',
                title: '',
                editForm: {
                    id: '',
                    warnType: '',
                    warnName: '',
                    preConf: '',
                    state: '',
                    selectRoleIds:[],
                    selectUserIds:[]
                },
                editVisible: false,
                detailsVisible: false,
                tableData1: [],
                userList: [],
                roleList:[],
                page: {
                    pageSize: 10,
                    pageNo: 1,
                    total: 0
                },
                props: 1,
                dialogVisible: false,
                query: ''
            }
        },
        methods: {
            select(e) {
                this.editForm.companyName = e.names
                this.editForm.companyId = e.id
                this.dialogVisible = false
                console.log(e)
            },
            init(method, obj) {
                if (method === 'add') {
                    this.editVisible = true
                    this.$nextTick(() => {
                        this.$refs.editForm.resetFields()
                        // this.editForm = {}
                    })
                    this.editForm.id = ''
                    this.editForm.warnType = ''
                    this.editForm.warnName = ''
                    this.editForm.preConf = ''
                    this.editForm.userIds = ''
                    this.editForm.roleIds = ''
                    this.editForm.state = ''
                    this.editForm.effectTimeStamp = ''
                    this.title = '新增'
                    this.visible = true
                    this.loading = false
                } else if (method === 'edit') {
                    this.editVisible = true
                    this.method = method
                    this.title = '修改'
                    console.log(obj.id)
                    this.$set(this.editForm, 'id', obj.id);
                    this.$nextTick(() => {
                        this.loading = true
                        if (method === 'edit' || method === 'view') { // 修改或者查看
                            getById({
                                id: this.editForm.id
                            }).then((res) => {
                                if (res.data.code === '200') {
                                    this.editForm = res.data.result
                                    this.loading = false
                                } else {
                                    this.loading = false
                                    this.visible = false
                                    this.$message({
                                        type: 'error',
                                        message: res.data.message
                                    })
                                }
                            })
                        }
                    })
                    this.visible = true
                    this.loading = false
                }

            },
            close() {
                this.editVisible = false
            },
            doSubmit() {
                this.$refs['editForm'].validate((valid) => {
                    if (valid) {
                        save(this.editForm).then((res) => {
                            if (res.data.code === '200') {
                                this.$message({
                                    message: '编辑成功',
                                    type: 'success'
                                })
                                this.editVisible = false
                                this.$emit('refreshDataList')
                            }
                        })
                    }
                })
            },
            queryUserList(query, cb) {
                if (query !== '') {
                  getUserSearchlist({
                    selectValue:query
                  }).then((res)=>{
                    console.log(res)
                    if (res.data.code==='200') {
                      this.userList=[]
                      for (let index = 0; index < res.data.result.length; index++) {
                        let element = {
                          id:'',
                          name:''
                        }
                       element.id=res.data.result[index].id
                       element.name=res.data.result[index].name
                       this.userList.push(element) ;
                      }
                      cb(this.userList)
                    }
                  })
                } else {
                  this.userList = [];
                }
            },
            queryRoleList(query, cb) {
                if (query !== '') {
                  getRoleSearchlist({
                    selectValue:query,
                    useable:'1'
                  }).then((res)=>{
                    console.log(res)
                    if (res.data.code==='200') {
                      this.roleList = []
                      for (let index = 0; index < res.data.result.length; index++) {
                        let element = {
                          id:'',
                          name:''
                        }
                       element.id=res.data.result[index].id
                       element.name=res.data.result[index].name
                       this.roleList.push(element) ;
                      }
                      cb(this.roleList)
                    }
                  })
                } else {
                  this.roleList = [];
                }
            }
        },
        mounted() {

        }
    }
</script>
<style lang="scss" scoped>
    ::v-deep .el-dialog {
        .el-form {
            .el-input__inner {
                width: 320px;
            }

            .inputAppend-wrapper {
                .el-input__inner {
                    width: 282px;
                }
            }
        }
    }
</style>
